<template>
  <div>
    <NaviList />

    <!--list-content-->
    <div class="main">
      <div class="py-container">
        <!--bread-->
        <div class="bread">
          <ul class="fl sui-breadcrumb">
            <li>
              <a href="#">全部结果</a>
            </li>
          </ul>
          <ul class="fl sui-tag">
            <li class="with-x" v-if="this.$route.query.l1_name">
              {{ this.$route.query.l1_name }}
            </li>
            <li class="with-x" v-if="this.$route.query.name">
              {{ this.$route.query.name }}<i @click="removeCategory">×</i>
            </li>
            <li class="with-x" v-if="this.$route.params.goodskey">
              {{ this.$route.params.goodskey }}<i @click="removeKeyword">×</i>
            </li>
          </ul>
        </div>
        <!--selector-->
        <div class="clearfix selector">
          <div
            class="type-wrap"
            v-for="(category, index) in categoryAttribute"
            :key="category.id"
          >
            <div class="fl key">{{ category.name }}</div>
            <div class="fl value">
              <ul class="type-list">
                <li v-for="(j, index) in goodsAttribute[index]" :key="index">
                  <a>{{ j.value }}</a>
                </li>
              </ul>
            </div>
            <div class="fl ext"></div>
          </div>
        </div>

        <!--details-->
        <div class="details clearfix">
          <div class="sui-navbar">
            <div class="navbar-inner filter">
              <ul class="sui-nav">
                <!-- <li :class="{active:searchParams.order.split(":")[0] == '1'}" > -->
                <li
                  :class="{ active: selectParams()['params'] == '1' }"
                  @click="condition(1)"
                >
                  <!-- <i class="iconfont icon-down" :class="{iconDown:searchParams.order.split(':')[1] == 'desc'}"></i> -->
                  <a href="#"
                    >综合
                    <i
                      v-if="searchParams.order.split(':')[0] == '1'"
                      class="iconfont"
                      :class="[
                        { 'icon-down': selectParams()['desc'] },
                        { 'icon-up': selectParams()['asc'] },
                      ]"
                    ></i
                  ></a>
                </li>
                <li
                  :class="{ active: selectParams()['params'] == '2' }"
                  @click="condition(2)"
                >
                  <a href="#"
                    >价格
                    <i
                      v-if="searchParams.order.split(':')[0] == '2'"
                      class="iconfont"
                      :class="[
                        { 'icon-down': selectParams()['desc'] },
                        { 'icon-up': selectParams()['asc'] },
                      ]"
                    ></i
                  ></a>
                </li>
              </ul>
            </div>
          </div>

          <div class="test">
            <!-- edit -->
            <div class="goods-list">
              <ul class="yui3-g">
                <li
                  class="yui3-u-1-5"
                  v-for="(item, index) in goodsList"
                  :key="item.goods_sn"
                >
                  <div class="list-wrap">
                    <div class="p-img">
                      <a href="item.html" target="_blank"
                        ><img :src="item.list_pic_url"
                      /></a>
                    </div>
                    <div class="price">
                      <strong>
                        <em> ¥ </em>
                        <i>{{ item.retail_price }}</i>
                      </strong>
                    </div>
                    <div class="attr">
                      <a
                        target="_blank"
                        href="item.html"
                        :title="item.goods_brief"
                        >{{ item.name }}</a
                      >
                    </div>
                    <div class="commit">
                      <i class="command">已有<span>2000</span>人评价</i>
                    </div>
                    <div class="operate">
                      <a
                        href="success-cart.html"
                        target="_blank"
                        class="sui-btn btn-bordered btn-danger"
                        >加入购物车</a
                      >
                      <a href="javascript:void(0);" class="sui-btn btn-bordered"
                        >收藏</a
                      >
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- <div class="fr page">
            <div class="sui-pagination clearfix">
              <ul>
                <li class="prev disabled">
                  <a href="#">«上一页</a>
                </li>
                <li class="active">
                  <a href="#">1</a>
                </li>
                <li>
                  <a href="#">2</a>
                </li>
                <li>
                  <a href="#">3</a>
                </li>
                <li>
                  <a href="#">4</a>
                </li>
                <li>
                  <a href="#">5</a>
                </li>
                <li class="dotted"><span>...</span></li>
                <li class="next">
                  <a href="#">下一页»</a>
                </li>
              </ul>
              <div><span>共10页&nbsp;</span></div>
            </div>
          </div> -->

          <!-- 自定义的pagination -->
          <Pagination
            class="fr page"
            :pagesize="searchParams.pagesize"
            :pagenum="searchParams.pagenum"
            :pagetotal="pagetotal"
            :showtotal="searchParams.showTotal"
            @accept="accept"
          ></Pagination>
        </div>

        <!--hotsale-->
        <div class="clearfix hot-sale">
          <h4 class="title">热卖商品</h4>
          <div class="hot-list">
            <ul class="yui3-g">
              <li class="yui3-u-1-4">
                <div class="list-wrap">
                  <div class="p-img">
                    <img src="./images/search/like_01.png" />
                  </div>
                  <div class="attr">
                    <em>Apple苹果iPhone 6s (A1699)</em>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>4088.00</i>
                    </strong>
                  </div>
                  <div class="commit">
                    <i class="command">已有700人评价</i>
                  </div>
                </div>
              </li>
              <li class="yui3-u-1-4">
                <div class="list-wrap">
                  <div class="p-img">
                    <img src="./images/search/like_03.png" />
                  </div>
                  <div class="attr">
                    <em>金属A面，360°翻转，APP下单省300！</em>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>4088.00</i>
                    </strong>
                  </div>
                  <div class="commit">
                    <i class="command">已有700人评价</i>
                  </div>
                </div>
              </li>
              <li class="yui3-u-1-4">
                <div class="list-wrap">
                  <div class="p-img">
                    <img src="./images/search/like_04.png" />
                  </div>
                  <div class="attr">
                    <em>256SSD商务大咖，完爆职场，APP下单立减200</em>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>4068.00</i>
                    </strong>
                  </div>
                  <div class="commit">
                    <i class="command">已有20人评价</i>
                  </div>
                </div>
              </li>
              <li class="yui3-u-1-4">
                <div class="list-wrap">
                  <div class="p-img">
                    <img src="./images/search/like_02.png" />
                  </div>
                  <div class="attr">
                    <em>Apple苹果iPhone 6s (A1699)</em>
                  </div>
                  <div class="price">
                    <strong>
                      <em>¥</em>
                      <i>4088.00</i>
                    </strong>
                  </div>
                  <div class="commit">
                    <i class="command">已有700人评价</i>
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Pagination from '@/components/Pagination/'
import axios from 'axios'
// import axios from "@/api/index";
import NaviList from "@/components/NaviList/index";
import { mapGetters, mapState } from "vuex";
export default {

  name: "search",
  data() {
    return {
      searchParams: {
        goodskey: "",
        category: "",
        // 页面显示设置
        //showTotal.表示可点击码按键
        showTotal:5,
        pagenum:1,
        pagesize:10,
        l1_category:'',
        l1_name:'',
        name:'',
        // 默认排序
        order:'1:asc'
      },
    };
  },
  mounted() {
    this.search();

  },
  components: {
    NaviList,
    Pagination
  },
  computed: {
    ...mapGetters(["goodsList", "categoryAttribute", "goodsAttribute"]),
    ...mapState({
      pagetotal: state => state.Search.categoryObj.total
    })
  },
  methods: {
        // 接受子传递的数据
    accept(index){
      let pagenum = index
      let searchParams = {
        ...this.searchParams,
        pagenum
      }
      this.searchParams = searchParams
      this.reqAttribute()
    },


    // 删除分类
    removeCategory(){
      let query = {...this.searchParams}
      query.category = undefined;
      query.name = undefined
  
      this.$router.replace({
        name:'Search',
        params:this.$router.params,
        query,
      })
      
    },
    // 删除关键字
    removeKeyword(){
      this.$route.params.goodskey = undefined
      
      
      this.$router.replace({
        name:'Search',
        params:this.$route.params,
        query:this.searchParams
      })

    },

    // 封装初始化数据
    initParams(){
        
      let {category,l1_category,l1_name,name} = this.$route.query 
      let {goodskey} = this.$route.params
   
      let searchParams = {
          ...this.searchParams,
          category,
          goodskey,
        l1_category,
        l1_name,
        name

      };
      this.searchParams = searchParams

    },
    // 封装 属性判断
    selectParams(){
      
     return {params:this.searchParams.order.split(':')[0],
             desc:this.searchParams.order.split(':')[1] == 'desc',
             asc:this.searchParams.order.split(':')[1] == 'asc'  

       }
    
      },
      //API请求
    reqAttribute(){
      this.$store.dispatch("getGoodsList", { params: this.searchParams });
    },
    // 修改order后提交
    condition(num){
      let {order} =this.searchParams 
      
       if(order.split(":")[0] != num){
         order =`${num}:${order.split(":")[1]}`
       }else{
        let orderSelect = order.split(":")[1] == 'desc' ? 'asc':'desc'
        order = `${num}:${orderSelect}`
       }
       this.searchParams.order = order
       this.reqAttribute()
      
    }
    
  },

  // 加载前赋值
  beforeMount() {
    //   let {category} = this.$route.query 
    //   let {goodskey} = this.$route.params
    //   let searchParams = {
    //     ...this.searchParams,
    //     category,
    //     goodskey

    // };
    //   this.searchParams = searchParams
    this.initParams()
  },
  mounted() {
      this.reqAttribute()
    
  },
  watch: {
    $route(newValue,oldValue){
        this.initParams()
        this.reqAttribute()  
    }
  },
};
</script>

<style lang="less" scoped>
@import "./css/index.less";
</style>